<template>
    <div class="QilinTable">
        <el-table
            :data="ownTableConfig.tableData"
            :border="ownTableConfig.elTableConfig && (ownTableConfig.elTableConfig.border === false ? false : true)"
            :stripe="ownTableConfig.elTableConfig && (ownTableConfig.elTableConfig.stripe === false ? false : true)"
            :size="(ownTableConfig.elTableConfig && ownTableConfig.elTableConfig.size) || 'small'"
            :height="(ownTableConfig.elTableConfig && ownTableConfig.elTableConfig.height) || '100%'"
            @selection-change="handleSelectionChange"
        >
            <template
                v-for="(item,index) in ownTableConfig.headerConfig"
            >
                <TableColumn :item="item" :key=" item.label+index || 'column-item-'+index ">
                    <template v-if="item.type === 'slot' " v-slot:[item.slotName]="slotData">
                        <slot :name="item.slotName" :data="{scope:slotData.data.scope,item}"></slot>
                    </template>
                    <template v-else-if="item.type === 'customOperate' " v-slot:elTableColumn>
                        <slot name="elTableColumn" :data="{item}"></slot>
                    </template>
                </TableColumn>
            </template>
            <template v-slot:empty>
                <div class="qilin-table-empty">
                    <img src="@/assets/images/dataEmpty.svg" alt="">
                    <p>暂无内容~</p>
                </div>
            </template>
        </el-table>
        <el-pagination
            class="flex-row"
            v-if="!ownTableConfig.paginationsObj || !ownTableConfig.paginationsObj.isHide"
            :current-page="ownTableConfig.paginationsObj && ownTableConfig.paginationsObj.currentPage"
            :page-sizes="ownTableConfig.paginationsObj && ownTableConfig.paginationsObj.pageSizes"
            :page-size="ownTableConfig.paginationsObj && ownTableConfig.paginationsObj.pageSize"
            :total="ownTableConfig.paginationsObj && ownTableConfig.paginationsObj.total"
            :layout="ownTableConfig.paginationsObj && ownTableConfig.paginationsObj.layout"
            @current-change="handleCurrentPage"
            @size-change="handleSizeChange"
            background
        ></el-pagination>
    </div>
</template>

<script>
import Qilin from "qilin-utils";
export default {
    name: "QilinTable",
    props: {
        tableConfig: {
            type: Object,
            default() {
                return {
                    elTableConfig: {
                        border: true, //是否代边框，默认为true
                        stripe: true, //是否为斑马纹，默认为true
                        size: "small", //表格尺寸，默认small
                    },
                    headerConfig: [
                        {
                            label: "表头名称", //表头名称
                            prop: "", //对应后台数据的字段名
                            type: "text", //表头字段的类型，默认text
                            align: "center", //对齐方式，默认center
                            width: 60, //列宽
                            minWidth: 60, //最小列宽
                            replaceValue: "-", //值为空的替代符，当后台数据值为null或undefined时生效
                            isHide: false, //是否隐藏某个表头，默认false
                            isHideFn:"event", //是否隐藏某个表头的方法
                            slotName: "", //slot插槽元素的name，当且仅当type为slot时生效
                            format: "yyyy-MM-dd hh:mm:ss", //日期时间格式化设置
                            ellipsis: false, //当内容过长被隐藏时显示 tooltip
                            operateOptions: { //操作栏按钮配置项--当且仅当type为operate生效
                                btnName: "按钮", //按钮名称
                                btnType: "default", //按钮类型
                                btnSize: "small", //按钮尺寸
                                disabled: false, //是否禁用按钮
                                isDisabled: "event", //是否禁用按钮的方法
                                btnClick: "event" //按钮点击事件
                            }
                        }
                    ],
                    // 真实数据
                    tableData: [],
                    // 表格分页配置项
                    paginationsObj: {
                        isHide:false, //是否隐藏分页器
                        currentPage: 1, //当前页
                        pageSize: 5, //当前每页数量
                        pageSizes: [5, 10, 15], //每页显示多少条选项集
                        total: 0, //表格总数量
                        layout: "total,sizes,prev,pager,next,jumper"
                    }
                }
            }
        }
    },
    data() {
        return {

        }
    },
    computed: {
        ownTableConfig: {
            get() {
                return this.tableConfig;
            },
            set(val) {
                this.$emit("update:tableConfig", val);
            }
        },
        getDate() {
            return function (date, format) {
                if (!date) {
                    return "-";
                };
                return Qilin.Date.formatDate(date, format);
            };
        }
    },
    methods: {
        // 监听切换页码事件
        handleCurrentPage(page) {
            // console.log(page);
            this.$emit("changeCurrentPage", page);
        },
        // 监听切换每页数量事件
        handleSizeChange(size) {
            // console.log(size);
            this.$emit("changeCurrentSize", size);
        },
        handleSelectionChange(val) {
            this.$emit("selectRowData", val);
        }
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.QilinTable {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    :deep(>.el-table) {
        flex: 1;
        .slot-box {
            height: 100%;
            overflow: hidden;
            >span{
                display: inline-block;
                width: 100%;
                // &.ellipsis{
                //     overflow:hidden;
                //     white-space:nowrap;
                //     text-overflow:ellipsis;
                // }
            }
        }
        .el-table__empty-block {
            min-height: 180px !important;
        }
        .qilin-table-empty {
            line-height: 24px;
        }
    }
    >.el-pagination {
        justify-content: flex-end;
        padding: 20px 0;
    }
}
</style>
